<template>
  <div class="student">
    <my-tabs :tab-list="tabList"></my-tabs>
    <div class="student-list" v-if="studentList.length > 0">
      <el-row
        class="item"
        type="flex"
        align="bottom"
        justify="space-between"
        v-for="item in studentList"
        :key="item.id"
      >
        <edu-avatar :size="56" :src="item.avatar_url" @click="goUser(item.user_id)"></edu-avatar>
        <div class="content">
          <div class="title" @click="goUser(item.user_id)">{{ item.nick_name }}</div>
          <div class="info">获取方式：{{ item.from_text }}</div>
        </div>
        <el-button size="mini" @click="handleDelete(item.user_id)">移出</el-button>
      </el-row>
    </div>
    <edu-no-data v-else></edu-no-data>
  </div>
</template>

<script>
import MyTabs from '../../components/myTab.vue'
import EduNoData from '@/components/EduNoData'
export default {
  components: {
    MyTabs,
    EduNoData
  },
  inject: ['reload'],
  data() {
    return {
      tabList: [
        {
          title: '全部'
        }
      ],
      studentList: []
    }
  },
  mounted() {
    this.handleStudentsList()
  },
  methods: {
    handleStudentsList() {
      this.$api.getCourseclassesStudents(this.$route.query.id, res => {
        this.studentList = res.data
      })
    },
    // 删除学员
    handleDelete(uid) {
      this.$messageBox
        .confirm('确定移除该学员吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '再想想'
        })
        .then(() => {
          this.$api.deleteCourseclassesStudents(
            this.$route.query.id,
            uid,
            res => {
              this.$message.success(res.msg, res => {
                this.reload()
              })
            },
            err => {
              this.$message.error(err.msg)
            }
          )
        })
        .catch(() => {})
    },
    goUser(id) {
      this.$router.push({
        path: '/user',
        query: {
          id: id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.student {
  .student-list {
    .item {
      margin-top: 24px;
      .content {
        flex: 1;
        padding: 0 20px;
        margin-bottom: 8px;
        .title {
          color: $text-color-import;
          font-size: 15px;
          @include ellipsis();
          cursor: pointer;
        }
        .info {
          margin-top: 10px;
          color: $text-color-auxiliary;
          font-size: 13px;
        }
      }
      .time {
        flex: 1;
        color: $text-color-auxiliary;
        font-size: 13px;
        margin-bottom: 8px;
      }
      .el-button {
        margin-bottom: 8px;
      }
    }
  }
}
</style>
